flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
3.2 kB
86 lines
1<script lang="ts">
2 import ReviewCard from '$lib/Components/Items/ReviewCard.svelte';
3 import Container from '$lib/Components/Layout/Container.svelte';
4 import { page } from '$app/stores';
5 import Comments from '$lib/Components/Items/BlueskyPost/Comments.svelte';
6
7 let { data } = $props();
8</script>
9
10<svelte:head>
11 <title>{data.record.author.displayName || data.record.author.handle}'s review | skywatched</title>
12
13 <meta
14 name="description"
15 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
16 .record.metadata?.title ?? ''} on skywatched"
17 />
18
19 <meta property="og:url" content={$page.url.href} />
20 <meta property="og:type" content="website" />
21 <meta
22 property="og:title"
23 content="{data.record.author.displayName || data.record.author.handle}'s review | skywatched"
24 />
25 <meta
26 property="og:description"
27 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
28 .record.metadata?.title ?? ''} on skywatched"
29 />
30 <meta property="og:image" content="{$page.url.href}/og.png" />
31
32 <meta name="twitter:card" content="summary_large_image" />
33 <meta property="twitter:domain" content="skywatched.app" />
34 <meta property="twitter:url" content={$page.url.href} />
35 <meta
36 name="twitter:title"
37 content="{data.record.author.displayName || data.record.author.handle}'s review | skywatched"
38 />
39 <meta
40 name="twitter:description"
41 content="{data.record.author.displayName || data.record.author.handle} reviewed {data.record
42 .record.metadata?.title ?? ''} on skywatched"
43 />
44 <meta name="twitter:image" content="{$page.url.href}/og.png" />
45</svelte:head>
46
47{#if data.record.record.metadata?.backdrop_path}
48 <img
49 src="https://image.tmdb.org/t/p/w780{data.record.record.metadata.backdrop_path}"
50 alt=""
51 class="fixed h-full w-full object-cover object-center opacity-20"
52 />
53{/if}
54
55<div class="fixed inset-0 h-full w-full bg-black/50"></div>
56
57<Container class="z-10 flex min-h-screen flex-col items-center pt-8">
58 <ReviewCard data={data.record} bigText={true} />
59
60 {#if data.record.record.crosspost?.uri}
61 <div class="relative mb-8 w-full max-w-2xl backdrop-blur-sm">
62 <div class="flex max-w-full items-center gap-4 overflow-hidden px-4">
63 <Comments uri={data.record.record.crosspost.uri} user={''} comments={[]} url={''} />
64 </div>
65 </div>
66 {:else}
67 <div class="flex flex-wrap items-center justify-center gap-4">
68 <div
69 class="z-10 rounded-lg border border-base-700 bg-base-50/5 px-3 py-2 text-xs font-medium text-base-200 transition-all duration-100 hover:bg-base-50/10"
70 >
71 <a
72 href={`/${data.record.record.item.ref === 'tmdb:m' ? 'movie' : 'tv'}/${data.record.record.item.value}`}
73 >
74 see {data.record.record.item.ref === 'tmdb:m' ? 'movie' : 'show'} details
75 </a>
76 </div>
77 <div
78 class="z-10 rounded-lg border border-base-700 bg-base-50/5 px-3 py-2 text-xs font-medium text-base-200 transition-all duration-100 hover:bg-base-50/10"
79 >
80 <a href={`/user/${data.record.author.handle}`}>
81 all reviews by {data.record.author.displayName || data.record.author.handle}
82 </a>
83 </div>
84 </div>
85 {/if}
86</Container>